<template>
  <div class="wrong-question-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的错题</span>
      </div>

      <!-- 筛选器 -->
      <div class="filter-container">
        <el-form :inline="true" size="small">
          <el-form-item label="章节">
            <el-select v-model="filters.chapter" placeholder="请选择章节" @change="filterQuestions">
              <el-option v-for="item in chapters" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="知识点">
            <el-select v-model="filters.knowledge" placeholder="请选择知识点" @change="filterQuestions">
              <el-option v-for="item in knowledgePoints" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
                v-model="filters.dateRange"
                type="daterange"
                placeholder="请选择日期范围"
                @change="filterQuestions"
            />
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="filters.keyword"
                placeholder="请输入关键词搜索"
                prefix-icon="el-icon-search"
                @keyup.enter="filterQuestions"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格展示 -->
      <el-table
          :data="paginatedData"
          border
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="题目" prop="question" />
        <el-table-column label="知识点" prop="knowledgePoint" />
        <el-table-column label="答错次数" prop="wrongCount" width="120" sortable />
        <el-table-column label="添加日期" prop="addedDate" width="150" sortable>
          <template #default="scope">
            <span>{{ formatDate(scope.row.addedDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最近复习日期" prop="lastReviewedDate" width="150" sortable>
          <template #default="scope">
            <span>{{ formatDate(scope.row.lastReviewedDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewQuestion(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="deleteQuestion(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next, sizes, jumper"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="filteredQuestions.length"
          @current-change="handlePageChange"
      />

      <!-- 导出按钮 -->
      <el-button type="primary" icon="el-icon-download" @click="exportQuestions" :disabled="selectedQuestions.length === 0">
        导出
      </el-button>

      <!-- 批量删除按钮 -->
      <el-button type="danger" icon="el-icon-delete" @click="batchDeleteQuestions" :disabled="selectedQuestions.length === 0">
        批量删除
      </el-button>
    </el-card>
  </div>
</template>

<script>
// import axios from '@/utils/request';

export default {
  name: "WrongQuestion",
  data() {
    return {
      filters: {
        chapter: '',
        knowledge: '',
        keyword: '',
        dateRange: [],
      },
      chapters: ["第一章", "第二章", "第三章"],
      knowledgePoints: ["数学基础", "代数几何", "微积分"],
      filteredQuestions: [],
      selectedQuestions: [],
      currentPage: 1,
      pageSize: 5,
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredQuestions.slice(start, end);
    },
  },
  methods: {
    formatDate(date) {
      return date ? new Date(date).toLocaleDateString() : "";
    },

    // 获取错题列表
    async fetchWrongQuestions() {
      // 模拟数据
      this.filteredQuestions = [
        {
          id: 1,
          question: "求解方程 x^2 + 3x + 2 = 0",
          knowledgePoint: "代数几何",
          wrongCount: 3,
          addedDate: new Date('2024-01-10'),
          lastReviewedDate: new Date('2024-02-01'),
        },
        {
          id: 2,
          question: "计算积分 ∫x^2 dx",
          knowledgePoint: "微积分",
          wrongCount: 2,
          addedDate: new Date('2024-02-15'),
          lastReviewedDate: new Date('2024-03-01'),
        },
        {
          id: 3,
          question: "解不等式 x + 5 > 7",
          knowledgePoint: "数学基础",
          wrongCount: 5,
          addedDate: new Date('2024-03-05'),
          lastReviewedDate: new Date('2024-03-10'),
        },
        {
          id: 4,
          question: "求解极限 lim(x→0) (sin(x)/x)",
          knowledgePoint: "微积分",
          wrongCount: 4,
          addedDate: new Date('2024-04-20'),
          lastReviewedDate: new Date('2024-04-25'),
        },
        {
          id: 5,
          question: "证明三角形面积公式",
          knowledgePoint: "代数几何",
          wrongCount: 1,
          addedDate: new Date('2024-05-10'),
          lastReviewedDate: new Date('2024-05-12'),
        },
      ];
    },

    // 筛选条件变化时重新请求数据
    filterQuestions() {
      this.fetchWrongQuestions();
    },

    // 删除单个错题
    async deleteQuestion(question) {
      try {
        // 模拟删除操作
        this.filteredQuestions = this.filteredQuestions.filter(q => q.id !== question.id);
        this.$message.success('删除成功');
      } catch (error) {
        this.$message.error('删除失败');
      }
    },

    // 批量删除
    async batchDeleteQuestions() {
      const ids = this.selectedQuestions.map((q) => q.id);
      try {
        // 模拟批量删除操作
        this.filteredQuestions = this.filteredQuestions.filter(q => !ids.includes(q.id));
        this.$message.success('批量删除成功');
      } catch (error) {
        this.$message.error('批量删除失败');
      }
    },

    // 导出错题
    async exportQuestions() {
      try {
        const exportData = this.filteredQuestions.map((q) => q.question).join('\n');
        console.log('导出内容：', exportData);
        this.$message.success('导出成功！');
      } catch (error) {
        this.$message.error('导出失败');
      }
    },

    // 分页变化时重新请求数据
    handlePageChange(page) {
      this.currentPage = page;
    },

    // 处理选择的错题
    handleSelectionChange(selection) {
      this.selectedQuestions = selection;
    },
  },

  mounted() {
    this.fetchWrongQuestions();
  },
};
</script>

<style scoped>
.wrong-question-container {
  margin: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
